<template>
  <el-dropdown trigger="click" @command="changeLanguage">
    <span class="el-dropdown-link">
      {{ $i18n.locale == "zh" ? "中文" : "English" }}
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>

    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="zh" :disabled="$i18n.locale == 'zh'"
          >中文</el-dropdown-item
        >

        <el-dropdown-item command="en" :disabled="$i18n.locale == 'en'"
          >English</el-dropdown-item
        >
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { ArrowDown } from "@element-plus/icons-vue";

import { i18n } from "../../router/i18n";
// 中英文切换
const changeLanguage = (command: any) => {
  i18n.global.locale = command; // 传递过来的是zh或en
  localStorage.setItem("my_locale", command);
};
</script>

<style lang="less" scoped>
  .el-dropdown-link{
    cursor: pointer;
  }
</style>
